<div class="col s12">
	<div class="card">
		<div class="card-content">
			<div id="color-usage" class="section scrollspy">
				<h2 class="header">Usage</h2>
				<p class="caption">
				Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class.
				</p>
				<div class="row section">
					<h5 class="col s12 m3">Background Color</h5>
					<div class="col s12 m9">
						<p>To apply a background color, just add the color name and light/darkness as a class to the element.</p>
						<div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
						<pre><code class="language-markup">
&lt;div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class&lt;/div>
						</code></pre>
					</div>

					<br>

					<h5 class="col s12 m3">Text Color</h5>
					<div class="col s12 m9">
						<p>To apply a text color, just append <code class="languague-markup">-text</code> to the color class like this:</p>
						<div class="card-panel"><span class="blue-text text-darken-2">This is a card panel with dark blue text</span></div>
						<pre><code class="language-markup">
&lt;div class="card-panel">
&lt;span class="blue-text text-darken-2">This is a card panel with dark blue text&lt;/span>
&lt;/div>
						</code></pre>
					</div>
				</div>
			</div>

			<div id="sass" class="section scrollspy">
				<h2 class="header">Sass</h2>
				<p>
				For background colors, you can apply the color simply by extending the classes like the example below.
				</p>
				<pre><code class="language-scss col s12">
.ilike-blue-container {
@extend .blue, .lighten-4;
}
				</code></pre>

				<p>
				For changing text color, you can apply the color simply by extending the classes like the example below.
				</p>
				<pre><code class="language-scss col s12">
.ilike-blue-container {
@extend .blue-text, .text-lighten-4;
}
				</code></pre>
			</div>

			<div id="palette" class="section scrollspy">
				<h2 class="header">Color Palette</h2>
				<div class="row dynamic-color">
					<div class="col s12 m6 l4">
						<div class="red lighten-5"></div>
						<div class="red lighten-4"></div>
						<div class="red lighten-3"></div>
						<div class="red lighten-2"></div>
						<div class="red lighten-1"></div>
						<div class="red"></div>
						<div class="red darken-1"></div>
						<div class="red darken-2"></div>
						<div class="red darken-3"></div>
						<div class="red darken-4"></div>
						<div class="red accent-1"></div>
						<div class="red accent-2"></div>
						<div class="red accent-3"></div>
						<div class="red accent-4"></div>
					</div>

					<div class="col s12 m6 l4">
						<div class="pink lighten-5"></div>
						<div class="pink lighten-4"></div>
						<div class="pink lighten-3"></div>
						<div class="pink lighten-2"></div>
						<div class="pink lighten-1"></div>
						<div class="pink"></div>
						<div class="pink darken-1"></div>
						<div class="pink darken-2"></div>
						<div class="pink darken-3"></div>
						<div class="pink darken-4"></div>
						<div class="pink accent-1"></div>
						<div class="pink accent-2"></div>
						<div class="pink accent-3"></div>
						<div class="pink accent-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="purple lighten-5"></div>
						<div class="purple lighten-4"></div>
						<div class="purple lighten-3"></div>
						<div class="purple lighten-2"></div>
						<div class="purple lighten-1"></div>
						<div class="purple"></div>
						<div class="purple darken-1"></div>
						<div class="purple darken-2"></div>
						<div class="purple darken-3"></div>
						<div class="purple darken-4"></div>
						<div class="purple accent-1"></div>
						<div class="purple accent-2"></div>
						<div class="purple accent-3"></div>
						<div class="purple accent-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="deep-purple lighten-5"></div>
						<div class="deep-purple lighten-4"></div>
						<div class="deep-purple lighten-3"></div>
						<div class="deep-purple lighten-2"></div>
						<div class="deep-purple lighten-1"></div>
						<div class="deep-purple"></div>
						<div class="deep-purple darken-1"></div>
						<div class="deep-purple darken-2"></div>
						<div class="deep-purple darken-3"></div>
						<div class="deep-purple darken-4"></div>
						<div class="deep-purple accent-1"></div>
						<div class="deep-purple accent-2"></div>
						<div class="deep-purple accent-3"></div>
						<div class="deep-purple accent-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="indigo lighten-5"></div>
						<div class="indigo lighten-4"></div>
						<div class="indigo lighten-3"></div>
						<div class="indigo lighten-2"></div>
						<div class="indigo lighten-1"></div>
						<div class="indigo"></div>
						<div class="indigo darken-1"></div>
						<div class="indigo darken-2"></div>
						<div class="indigo darken-3"></div>
						<div class="indigo darken-4"></div>
						<div class="indigo accent-1"></div>
						<div class="indigo accent-2"></div>
						<div class="indigo accent-3"></div>
						<div class="indigo accent-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="blue lighten-5"></div>
						<div class="blue lighten-4"></div>
						<div class="blue lighten-3"></div>
						<div class="blue lighten-2"></div>
						<div class="blue lighten-1"></div>
						<div class="blue"></div>
						<div class="blue darken-1"></div>
						<div class="blue darken-2"></div>
						<div class="blue darken-3"></div>
						<div class="blue darken-4"></div>
						<div class="blue accent-1"></div>
						<div class="blue accent-2"></div>
						<div class="blue accent-3"></div>
						<div class="blue accent-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="light-blue lighten-5"></div>
						<div class="light-blue lighten-4"></div>
						<div class="light-blue lighten-3"></div>
						<div class="light-blue lighten-2"></div>
						<div class="light-blue lighten-1"></div>
						<div class="light-blue"></div>
						<div class="light-blue darken-1"></div>
						<div class="light-blue darken-2"></div>
						<div class="light-blue darken-3"></div>
						<div class="light-blue darken-4"></div>
						<div class="light-blue accent-1"></div>
						<div class="light-blue accent-2"></div>
						<div class="light-blue accent-3"></div>
						<div class="light-blue accent-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="cyan lighten-5"></div>
						<div class="cyan lighten-4"></div>
						<div class="cyan lighten-3"></div>
						<div class="cyan lighten-2"></div>
						<div class="cyan lighten-1"></div>
						<div class="cyan"></div>
						<div class="cyan darken-1"></div>
						<div class="cyan darken-2"></div>
						<div class="cyan darken-3"></div>
						<div class="cyan darken-4"></div>
						<div class="cyan accent-1"></div>
						<div class="cyan accent-2"></div>
						<div class="cyan accent-3"></div>
						<div class="cyan accent-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="teal lighten-5"></div>
						<div class="teal lighten-4"></div>
						<div class="teal lighten-3"></div>
						<div class="teal lighten-2"></div>
						<div class="teal lighten-1"></div>
						<div class="teal"></div>
						<div class="teal darken-1"></div>
						<div class="teal darken-2"></div>
						<div class="teal darken-3"></div>
						<div class="teal darken-4"></div>
						<div class="teal accent-1"></div>
						<div class="teal accent-2"></div>
						<div class="teal accent-3"></div>
						<div class="teal accent-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="green lighten-5"></div>
						<div class="green lighten-4"></div>
						<div class="green lighten-3"></div>
						<div class="green lighten-2"></div>
						<div class="green lighten-1"></div>
						<div class="green"></div>
						<div class="green darken-1"></div>
						<div class="green darken-2"></div>
						<div class="green darken-3"></div>
						<div class="green darken-4"></div>
						<div class="green accent-1"></div>
						<div class="green accent-2"></div>
						<div class="green accent-3"></div>
						<div class="green accent-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="light-green lighten-5"></div>
						<div class="light-green lighten-4"></div>
						<div class="light-green lighten-3"></div>
						<div class="light-green lighten-2"></div>
						<div class="light-green lighten-1"></div>
						<div class="light-green"></div>
						<div class="light-green darken-1"></div>
						<div class="light-green darken-2"></div>
						<div class="light-green darken-3"></div>
						<div class="light-green darken-4"></div>
						<div class="light-green accent-1"></div>
						<div class="light-green accent-2"></div>
						<div class="light-green accent-3"></div>
						<div class="light-green accent-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="lime lighten-5"></div>
						<div class="lime lighten-4"></div>
						<div class="lime lighten-3"></div>
						<div class="lime lighten-2"></div>
						<div class="lime lighten-1"></div>
						<div class="lime"></div>
						<div class="lime darken-1"></div>
						<div class="lime darken-2"></div>
						<div class="lime darken-3"></div>
						<div class="lime darken-4"></div>
						<div class="lime accent-1"></div>
						<div class="lime accent-2"></div>
						<div class="lime accent-3"></div>
						<div class="lime accent-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="yellow lighten-5"></div>
						<div class="yellow lighten-4"></div>
						<div class="yellow lighten-3"></div>
						<div class="yellow lighten-2"></div>
						<div class="yellow lighten-1"></div>
						<div class="yellow"></div>
						<div class="yellow darken-1"></div>
						<div class="yellow darken-2"></div>
						<div class="yellow darken-3"></div>
						<div class="yellow darken-4"></div>
						<div class="yellow accent-1"></div>
						<div class="yellow accent-2"></div>
						<div class="yellow accent-3"></div>
						<div class="yellow accent-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="amber lighten-5"></div>
						<div class="amber lighten-4"></div>
						<div class="amber lighten-3"></div>
						<div class="amber lighten-2"></div>
						<div class="amber lighten-1"></div>
						<div class="amber"></div>
						<div class="amber darken-1"></div>
						<div class="amber darken-2"></div>
						<div class="amber darken-3"></div>
						<div class="amber darken-4"></div>
						<div class="amber accent-1"></div>
						<div class="amber accent-2"></div>
						<div class="amber accent-3"></div>
						<div class="amber accent-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="orange lighten-5"></div>
						<div class="orange lighten-4"></div>
						<div class="orange lighten-3"></div>
						<div class="orange lighten-2"></div>
						<div class="orange lighten-1"></div>
						<div class="orange"></div>
						<div class="orange darken-1"></div>
						<div class="orange darken-2"></div>
						<div class="orange darken-3"></div>
						<div class="orange darken-4"></div>
						<div class="orange accent-1"></div>
						<div class="orange accent-2"></div>
						<div class="orange accent-3"></div>
						<div class="orange accent-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="deep-orange lighten-5"></div>
						<div class="deep-orange lighten-4"></div>
						<div class="deep-orange lighten-3"></div>
						<div class="deep-orange lighten-2"></div>
						<div class="deep-orange lighten-1"></div>
						<div class="deep-orange"></div>
						<div class="deep-orange darken-1"></div>
						<div class="deep-orange darken-2"></div>
						<div class="deep-orange darken-3"></div>
						<div class="deep-orange darken-4"></div>
						<div class="deep-orange accent-1"></div>
						<div class="deep-orange accent-2"></div>
						<div class="deep-orange accent-3"></div>
						<div class="deep-orange accent-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="brown lighten-5"></div>
						<div class="brown lighten-4"></div>
						<div class="brown lighten-3"></div>
						<div class="brown lighten-2"></div>
						<div class="brown lighten-1"></div>
						<div class="brown"></div>
						<div class="brown darken-1"></div>
						<div class="brown darken-2"></div>
						<div class="brown darken-3"></div>
						<div class="brown darken-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="grey lighten-5"></div>
						<div class="grey lighten-4"></div>
						<div class="grey lighten-3"></div>
						<div class="grey lighten-2"></div>
						<div class="grey lighten-1"></div>
						<div class="grey"></div>
						<div class="grey darken-1"></div>
						<div class="grey darken-2"></div>
						<div class="grey darken-3"></div>
						<div class="grey darken-4"></div>
					</div>
					</div>
						<div class="row dynamic-color">
						<div class="col s12 m6 l4">
						<div class="blue-grey lighten-5"></div>
						<div class="blue-grey lighten-4"></div>
						<div class="blue-grey lighten-3"></div>
						<div class="blue-grey lighten-2"></div>
						<div class="blue-grey lighten-1"></div>
						<div class="blue-grey"></div>
						<div class="blue-grey darken-1"></div>
						<div class="blue-grey darken-2"></div>
						<div class="blue-grey darken-3"></div>
						<div class="blue-grey darken-4"></div>
					</div>
					<div class="col s12 m6 l4">
						<div class="black"></div>
						<div class="white"></div>
						<div class="transparent"></div>
					</div>          
				</div>
			</div>

		</div>
	</div>
</div>


